<template>
  <!-- 列表 -->
  <!-- v-if="activeID >= 10000" -->
  <div
    class="matchmakerList w8rem b-r-1px b-r-#f4f5f9 b-r-solid text-center color-gray"
    @click="handlerSelectMatchmaker"
  >
    <div class="h44px b-b-1px b-b-#f4f5f9 b-b-solid pb2 pt2 lh-44px color-black">红娘列表</div>
    <div class="pl2 pr2">
      <div
        :class="{ 'bg-blueGray color-white': activeID == item.id }"
        class="mt1 cursor-pointer rd pb1.5 pt1.5"
        v-for="item in list"
        :key="item.id"
        :data-id="item.id"
        :data-nickname="item.name"
        >{{ item.name }}/ {{ item.id }}</div
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCache } from '@/hooks/web/useCache'
import * as MatchmakerInfoApi from '@/api/blind/maker/MatchmakerInfo'
import * as SessionRecordApi from '@/api/blind/sessionRecord/index.ts'
import { useIMStoreWithOut } from '@/store/modules/im'
import { TUIStore, StoreName, TUIConversationService } from '@tencentcloud/chat-uikit-engine'
import Server from '@/TUIKit/components/TUIContact/server.ts'
const TUIContactServer = Server.getInstance()
const TUIConstants = TUIContactServer.constants
console.log(TUIConstants)

const { wsCache } = useCache()

defineOptions({ name: 'MatchmakerListSideBar' })

const activeID = ref()
const list = ref<MatchmakerInfoApi.MatchmakerInfoVO[]>() // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

/** 查询列表 */
const getList = async () => {
  try {
    // 查询 红娘列表
    const data = await MatchmakerInfoApi.getMatchmakerInfoPage(queryParams)

    list.value = data.list
  } catch (error) {
    console.log(error)
  }
}

/** 查询会话列表 */
const getConversationList = async (id: string) => {
  try {
    const data = await SessionRecordApi.getSessionRecordPage({
      pageNo: 1,
      pageSize: 100,
      userId: id
    })

    // 清空 自定义会话ID
    // TUIStore.update(StoreName.CUSTOM, 'CustomconversationID', '')

    // DC：增加自定义的会话列表，UI 层更新自定义 Store 数据
    TUIStore.update(StoreName.CUSTOM, 'CustomconversationList', data.list)

    // 循环创建会话列表
    data.list.forEach((item) => {
      const userID = item.participants

      // 创建会话
      createConversation(userID)
    })

    return data.list
  } catch (error) {
    console.log(error)
  }
}

// 创建会话
const createConversation = async (userID: string) => {
  const res = await TUIConversationService.getConversationProfile(`C2C${userID}`).catch((error) => {
    console.log(error)
  })
  console.log('创建会话成功', res)
}

// 选择红娘
const handlerSelectMatchmaker = async (e: { target: any }) => {
  console.log('=======================')

  const { id } = e.target.dataset
  console.log('---->', id)

  activeID.value = id

  // DC: 临时写入本地 Local
  wsCache.set('IMUserID', id)

  // 重新登录 IM
  await useIMStoreWithOut().reLoginTIM(id)

  // 查询 会话列表
  await getConversationList(id)
}

/** 初始化 **/
onMounted(async () => {
  await getList()

  // 获取列表中第一个红娘ID
  const userID = String(list.value![0].id)
  activeID.value = list.value![0].id

  // 默认登录第一个红娘ID
  await useIMStoreWithOut().reLoginTIM(userID)
  // 查询 会话列表
  await getConversationList(userID)
})
</script>
